<template>
  <span>{{ formattedDate }}</span>
</template>

<script>
import { computed } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'DateRenderer',
  props: {
    value: {
      type: [String, Object],
      default: null
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    }
  },
  setup(props) {
    const formattedDate = computed(() => {
      if (!props.value) return '未设置'
      
      try {
        const date = dayjs(props.value)
        return date.isValid() ? date.format(props.format) : '无效日期'
      } catch (error) {
        return '无效日期'
      }
    })
    
    return {
      formattedDate
    }
  }
}
</script> 